<!--页面主要内容-->
<main class="lyear-layout-content">

    <div class="container-fluid p-t-15">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">

                        <form method="post" class="row" enctype="multipart/form-data">
                            <div class="form-group col-md-12">
                                <label for="name">商品分类名称</label>
                                <input type="text" class="form-control" id="name" name="name" value=""
                                    placeholder="请输入分类名称" />
                            </div>
                            <div class="form-group col-md-12">
                                <label for="weigh">商品分类权重</label>
                                <input type="number" class="form-control" id="weigh" name="weigh" min="1" value=""
                                    placeholder="配置的数值" />
                            </div>
                            <div class="form-group">
                                <label for="cover">商品分类图标</label>
                                <div class="input-group" style="display: block;">
                                    <input type="file" class="form-control" name="cover" id="cover" multiple
                                        hidden>
                                    <img class="img" width="200"
                                        src="/static/home/res/images/upload.png"
                                        id="img-cover" />
                                    <div class="input-group-append"><button class="btn btn-default"
                                            onclick="cover.click()" type="button">上传图片</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <button type="submit" class="btn btn-primary ajax-post"
                                    target-form="add-form">添加</button>
                                <button type="button" class="btn btn-default"
                                    onclick="javascript:history.back(-1);return false;">返 回</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

        </div>

    </div>

</main>
<!--End 页面主要内容-->
<script>
    layui.use(['layer'], function () {
        let $ = layui.jquery,
            layer = layui.layer
        $('input[name="name"]').change(function () {
            let name = $(this).val();
            // console.log(username);
            //发起请求
            let _this = this
            $.ajax({
                type: 'post',
                url: `{:url('admin/product/productsortadd')}`,
                data: {
                    name,
                    action: "name"
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg, { icon: 1 })
                    } else {
                        $(_this).val('');
                        layer.msg(res.msg, { icon: 0 })
                    }
                }
            })
        })    
    })
    // 图片预览函数
    function GetObjectURL(file) {
        // console.log(file)
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;
        // let binaryData = [];
        //     binaryData.push(file);
        // link.href = window.URL.createObjectURL(new Blob(binaryData,));
        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }

        return url
    }

    $("#cover").change(function () {
        let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}
        // console.log(file)

        let id = $(this).attr('id')
        let url = GetObjectURL(file)
        let imgArr = $(".img")
        console.log(imgArr)
        for (let item of imgArr) {
            let itemid = $(item).attr('id')
    
            if ('img-' + id == itemid) {
                $(item).attr('src', url)
            }
        }

        // $('#cover').val(''); //处理完之后只需要加这个代码即可
    })

   
</script>